<template>
    <div class="body" id="building">
        <br>
        <h1>1905电影网数据分析</h1>
        <el-carousel :interval="4000" type="card" height="600px">
            <el-carousel-item>
                <el-select v-model="student.city" filterable placeholder="请选择地区" style="margin-left: 5px;">
                    <el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="student.major" filterable placeholder="请选择类型" style="margin-left: 5px;">
                    <el-option v-for="item in majors" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                
               
                <el-button type="primary" style="margin-left: 5px;" @click="loadPost()">查询</el-button>
                <div class="box" id="container1">

                </div>
            </el-carousel-item>
            <el-carousel-item>
                <el-select v-model="student.city" filterable placeholder="请选择地区" style="margin-left: 5px;">
                    <el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="student.major" filterable placeholder="请选择类型" style="margin-left: 5px;">
                    <el-option v-for="item in majors" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                
                <el-button type="primary" style="margin-left: 5px;" @click="loadPost()">查询</el-button>
                <div class="box" id="container2">
                </div>

            </el-carousel-item>
            <el-carousel-item>
                <el-select v-model="student.city" filterable placeholder="请选择地区" style="margin-left: 5px;">
                    <el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="student.major" filterable placeholder="请选择类型" style="margin-left: 5px;">
                    <el-option v-for="item in majors" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                
                <el-button type="primary" style="margin-left: 5px;" @click="loadPost()">查询</el-button>
                <div class="box" id="container3">
                </div>

            </el-carousel-item>
            <el-carousel-item>
                <div class="box" id="container4">
                </div>
            </el-carousel-item>
            <el-carousel-item>
                <el-input v-model="student.name" placeholder="请输入电影名" suffix-icon="el-icon-search" style="width: 200px;"
                    @keyup.enter.native="load"></el-input>
                <el-button type="primary" style="margin-left: 5px;" @click="load">查询</el-button>
                <div class="box" id="container5">
                </div>
            </el-carousel-item>
            <el-carousel-item>
            

                <div class="box" id="container6">
                </div>
            </el-carousel-item>
        </el-carousel>
        <h5>©2024 design and manufacture by @iced-suger-orange. All Rights Reserved </h5>
    </div>
</template>

<script>

import * as echarts from 'echarts';
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Echarts',
    components: {
    },
    data() {
        return {
            pie: [],
            student: {
                name: '',
                city: '内地',
                major: '悬疑',
                enrollmentYear: 2023
            },
            citys: [
                {
                    value: '内地',
                    label: '内地'
                }, {
                    value: '日韩',
                    label: '日韩'
                }, {
                    value: '港澳',
                    label: '港澳'
                }, {
                    value: '欧美',
                    label: '欧美'
                },
            ],
            majors: [
                {
                    value: '爱情',
                    label: '爱情'
                }, {
                    value: '剧情',
                    label: '剧情'
                }, {
                    value: '动作',
                    label: '动作'
                }, {
                    value: '悬疑',
                    label: '悬疑'
                }, {
                    value: '家庭',
                    label: '家庭'
                }, {
                    value: '历史',
                    label: '历史'
                }, {
                    value: '战争',
                    label: '战争'
                }, {
                    value: '犯罪',
                    label: '犯罪'
                }, {
                    value: '剧情',
                    label: '剧情'
                },

            ],
            years: [
                {
                    value: 2003,
                    label: 2003
                }, {
                    value: 2000,
                    label: 2000
                }, {
                    value: 1992,
                    label: 1992
                }, {
                    value: 2012,
                    label: 2012
                },
            ]
        }
    },
    methods: {
        loadPost() {
            this.$axios.post(this.$httpUrl + '/students/echart1', this.student).then(res => res.data).then(res => {
                // console.log(res)
                this.drawChart(res)
            })
        },


        drawChart(data) {
            console.log(data)
            //折线图
            var chartDom = document.getElementById('container1');
            // 判断是否已经初始化
            if (echarts.getInstanceByDom(chartDom)) {
                // 已初始化，销毁实例
                echarts.getInstanceByDom(chartDom).dispose();
            }
            var myChart = echarts.init(chartDom);
            var option = {
                xAxis: {
                    type: 'category',
                    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    data: data.major
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        // data: [150, 230, 224, 218, 135, 147, 260],
                        data: data.data,
                        type: 'line'
                    }
                ]
            };
            myChart.setOption(option);
            //柱状图
            var chartDom2 = document.getElementById('container2');
            // 判断是否已经初始化
            if (echarts.getInstanceByDom(chartDom2)) {
                // 已初始化，销毁实例
                echarts.getInstanceByDom(chartDom2).dispose();
            }
            var myChart2 = echarts.init(chartDom2);
            var option2 = {
                xAxis: {
                    type: 'category',
                    data: data.name
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: data.data,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };
            myChart2.setOption(option2);
            //面积图
            var chartDom3 = document.getElementById('container3');
            // 判断是否已经初始化
            if (echarts.getInstanceByDom(chartDom3)) {
                // 已初始化，销毁实例
                echarts.getInstanceByDom(chartDom3).dispose();
            }
            var myChart3 = echarts.init(chartDom3);
            var option3 = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.enrollmentYear
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: data.data,
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            };
            myChart3.setOption(option3);
        },

        loadGet() {
            this.$axios.get(this.$httpUrl + '/students/echart2').then(res => res.data).then(res => {
                // console.log(res)
                this.drawChartPie(res.data)
            })
        },
        drawChartPie(data) {
            console.log(data)
            var chartDom3 = document.getElementById('container6');
            if (echarts.getInstanceByDom(chartDom3)) {
                // 已初始化，销毁实例
                echarts.getInstanceByDom(chartDom3).dispose();
            }
            var myChart2 = echarts.init(chartDom3);
            var option2 = {
                title: {
                    text: '电影类型占比',

                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: data,

                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart2.setOption(option2);
        },
        drawRadarChart() {
            var chartDomRadar = document.getElementById('container4');
            if (echarts.getInstanceByDom(chartDomRadar)) {
                // 已初始化，销毁实例  
                echarts.getInstanceByDom(chartDomRadar).dispose();
            }

            var myChartRadar = echarts.init(chartDomRadar);

            var optionRadar = {
                title:{
                     text: '电影产地分布',
                    left: 'center'
                    

                },
            
                legend: {
                    data: ['city'],
                    orient: 'vertical', // 垂直显示  
                    right: '5%',
                    top:'20%'
                },
                radar: {
                    //shape: 'circle',
                    indicator: [
                        { name: '内地', value: 7000 },
                        { name: '港台', value: 7000 },
                        { name: '欧美', value: 7000 },
                        { name: '日韩', value: 380 },
                        { name: '其他', value: 380},

                    ],
                    axisLine: {  
            lineStyle: {  
                color: 'rgba(0, 0, 0, 1)'
                // 默认自动取色，也可以设置为具体的颜色值，如 '#ff0000'  
            }  
        }  
                },
                series: [
                    {
                        name: 'Budget vs spending',
                        type: 'radar',
                        data: [

                            {
                                value: [8979, 6079, 58, 58, 19],
                                name: 'REGION'
                            }
                        ]
                    }
                ]
            };

            myChartRadar.setOption(optionRadar);
        },

        load() {
            this.$axios.get(this.$httpUrl + '/students/echart3?name=' + this.student.name).then(res => res.data).then(res => {
                console.log(res)
                this.chart(res.data)
            })
        },
        chart(data) {
            var chartDom = document.getElementById('container5');
            // 判断是否已经初始化
            if (echarts.getInstanceByDom(chartDom)) {
                // 已初始化，销毁实例
                echarts.getInstanceByDom(chartDom).dispose();
            }
            var myChart = echarts.init(chartDom);
            var option = {
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                series: [
                    {
                        name: data.name + '评分',
                        type: 'gauge',
                        detail: {
                            formatter: '{value}'
                        },
                        data: [
                            {
                                value: data.score,
                                name: '评分'
                            }
                        ]
                    }
                ]
            };

            myChart.setOption(option);
        },


    },
    mounted() {
        this.loadGet();
        this.drawRadarChart();

    }

}
</script>

<style>
h1 {
    text-align: center;
    color: white;
    margin-bottom: 25px;
}
h5{
   color: white;
   text-align: center;
   text-size:2px;
}

.body {
    height: 100vh;
    /* 弹性盒子模型 */
    justify-content: center;
    align-items: center;
    background-color: #99a9bf;

}
#container4{
    width: 700px;
    margin: 0 auto;
}
.box {
    width: 100%;
    height: 600px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

* {
    margin: 0;
    padding: 0;
}

#building {
    background: url("../assets/90.jpg");

    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100% 100%;


}
</style>